<template>
  <div class="t-pagination-select-demo" style="width:100%;min-height:100px;padding:15px;">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="品名(原料)" prop="materialId">
        <t-pagination-select
          @page-change="pageChange"
          :optionSource="materialIdArr"
          v-model="addForm.materialId"
          labelKey="materialName"
          valueKey="id"
          :paginationOption="setSelectPage"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitImportForm">提交</el-button>
  </div>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'TPaginationSelectDemo',
  data() {
    return {
      addForm: {
        materialId: null // 产出品名
      },
      addFormRules: {
        materialId: [
          { required: true, message: '请选择品名(原料)！', trigger: 'change' }
        ]
      },
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created() {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange(val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList(pageNum) {
      // const params = {
      //   pageNum: pageNum || 1,
      //   pageSize: this.setSelectPage.pageSize,
      // }
      // const res = await Api.selectMaterialList(params)
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    submitImportForm() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return
        console.log('提交', this.addForm)
      })
    }
  }
}
</script>
